<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>6-2.简单的精灵演示程序</title>
</head>
<body>
	<canvas id="canvas" width="600" height="600"></canvas>
</body>
<script type="text/javascript" src="Sprite.js"></script>
<script type="text/javascript" src="../Charpter-05/requestNextAnimationFrame.js"></script>
<script type="text/javascript">
	var canvas = document.getElementById('canvas'),
		context = canvas.getContext('2d'),

		CLOCK_RADIUS = canvas.width/2 - 15, // 指针半径
		HOUR_HAND_TRUNCATION = 35, // 时针半径截掉35像素

	// Painter...........................................................

		// 小球绘制器
		ballPainter = {
			paint: function(sprite, context){
				var x = sprite.left + sprite.width/2,
					y = sprite.top + sprite.height/2,
					width = sprite.width,
					height = sprite.height,
					radius = sprite.width/2;

					// 绘制路径
					context.save();
					context.beginPath();
					context.arc(x, y, radius, 0, Math.PI*2, false);
					context.clip();

					// 绘制阴影
					context.shadowColor = 'rgb(0, 0, 0)';
					context.shadowOffsetX = -4;
					context.shadowOffsetY = -4;
					context.shadowBlur = 8;

					// 设置属性
					context.lineWidth = 2;
					context.strokeStyle = '#ccc';
					context.fillStyle = 'rgba(30, 144, 255, 0.15)';
					context.fill();
					context.stroke();

					context.restore();
				}
		},

	// Sprite.............................................................

		// 小球精灵
		ball = new Sprite('ball', ballPainter);

// Functions................................................................
	
	// 绘制指针
	function drawHand(location, isHour){
		var angle = (Math.PI*2) * (location/60) - Math.PI/2,
			handRadius = isHour ? CLOCK_RADIUS - HOUR_HAND_TRUNCATION : CLOCK_RADIUS,
			lineEnd = {
				x: canvas.width/2 + Math.cos(angle)*(handRadius - ball.width/2),
				y: canvas.height/2 + Math.sin(angle)*(handRadius - ball.width/2)
			};

		context.beginPath();
		context.moveTo(canvas.width/2, canvas.height/2);
		context.lineTo(lineEnd.x, lineEnd.y);
		context.stroke();

		ball.left = canvas.width/2 + Math.cos(angle)*handRadius - ball.width/2;
		ball.top = canvas.height/2 + Math.sin(angle)*handRadius - ball.height/2;
		ball.paint(context);
	}

	// 绘制时钟
	function drawClock(){
		drawClockFace();
		drawHands();
	}

	// 绘制所有指针
	function drawHands(){
		var date = new Date(),
			hour = date.getHours();

		// 绘制秒针
		ball.width = 20;
		ball.height = 20;
		drawHand(date.getSeconds(), false);

		// 绘制分针
		hour = hour > 12 ? hour - 12 : hour;
		ball.width = 35;
		ball.height = 35;
		drawHand(date.getMinutes(), false);

		// 绘制时针
		ball.width = 50;
		ball.height = 50;
		drawHand(hour*5 + (date.getMinutes()/60)*5, true);

		// 绘制轴心
		ball.width = 10;
		ball.height = 10;
		ball.left = canvas.width/2 - ball.width/2;
		ball.top = canvas.height/2 - ball.height/2;
		ballPainter.paint(ball, context); // ball.paint(context);
	}

	// 绘制表盘
	function drawClockFace(){
		context.beginPath();
		context.arc(canvas.width/2, canvas.height/2, CLOCK_RADIUS, 0, Math.PI*2, false);
		context.save();
		context.strokeStyle = 'rgba(0, 0, 0, 0.2)';
		context.stroke();
		context.restore();
	}

	// 动画
	function animate(){
		context.clearRect(0, 0, canvas.width, canvas.height);

		drawClock();
		window.requestNextAnimationFrame(animate);
	}

// Initialization..........................................................................

	context.lineWidth = 0.5;
	context.strokeStyle = 'rgba(0, 0, 0, 0.2)';
	context.shadowColor = 'rgba(0, 0, 0, 0.5)';
	context.shadowOffsetX = 2;
	context.shadowOffsetY = 2;
	context.shadowBlur = 4;
	context.stroke();

	animate();	// window.requestNextAnimationFrame(animate);
</script>
</html>